<template>
  <div class="">
    <h1>4.自定义指令directive</h1>
    <!-- 自定去定义设计一个指令 -->
    <button @click="red = 'yellow'">改变red值</button>
    <h1 v-red="red">{{ msg }}</h1>
    <h1 v-red="'blue'">{{ msg }}</h1>

    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
      red: "red",
    };
  },
  mounted() {},
  methods: {},
  directives: {
    red: {
      bind(el, binding) {
        el.style.background = binding.value;
      },
      update(el, binding) {
        el.style.background = binding.value;
      },
      //所有的钩子函数都有两个参数，el代表绑定指令的元素，binding是一个对象，包含了绑定指令时候的一些信息
    },
    // 我们想要在初始还有更新的时候都给这个元素绑定上这个指令设置一个背景色，这个时候我们需要在bind和update这两个生命周期函数中进行操作，代码是一样的，就可以简写为一个函数，如下：
    // red(el, binding) {
    //   el.style.background = binding.value;
    // },
    //el是自带的参数代表绑定这个指令的元素

    focus: {
      inserted(el) {
        el.focus();
      },
      //自定义指令的生命周期函数，当这个节点被插入到父节点的时候自动调用
    },
    //让元素自动获得焦点
  },
};
</script>

<style lang="scss"></style>
